<template>
  <div>
    <el-page-header @back="goBack" content="书本详情"></el-page-header>
    <div class="bg_detail" >
      <img :src="book.b_cover" style="position: absolute;top:50px;left:100px;width: 300px;height: 300px;margin-left: 380px">
      <div style="color:black;text-align:left;position: absolute;left:450px;top:50px;margin-left: 350px;font-size: 30px">
        <h2>《{{book.b_name}}》</h2>
        <p>作者：{{book.b_author}}</p>
        <p>出版社：{{book.b_publisher}}</p>
        <p >价格：<span style="color:orangered;">{{book.b_price}}元</span></p>
        <div style="margin-top: 20px">
          <el-button icon="el-icon-star-on" type="warning" @click="changeCollect">收藏</el-button>
          <div>
            <el-input-number style="width: 35%;margin-right: 5px" v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字">
            </el-input-number><el-button type="primary" @click="toCart4">加入购物车</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-card style="margin-top: 120px;">
      <el-tabs v-model="activeName" type="card" >
        <el-tab-pane label="介绍" name="first"  style="text-align: left;">{{ book.b_mark }}</el-tab-pane>
        <el-tab-pane label="评论" name="second"><BookComment :id="book.b_id"></BookComment></el-tab-pane>
        <el-tab-pane label="角色" name="third">暂无数据</el-tab-pane>
        <el-tab-pane label="售后" name="fourth">暂无数据</el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script>
import BookComment from "@/views/BookComment";
export default {
  name: "BookDetail",
  components: {BookComment},
  data(){
    return{
      num: 1,
       isCollect:false,
      book:{},
      activeName:"first",
      count:0
    }
  },
  methods:{
    // 数量改变
    handleChange(value) {
      console.log(value);
    },
    async countCollect() {
      //被收藏的书籍数量
      const {data: res} = await this.$axios.get("/collect/countCollect", {params: {b_id: this.$route.query.b_id}})
      console.log(res.data)
      this.count = res.data
    },
    //获取收藏状态
    async getCollect() {
      const {data: res} = await this.$axios.get("/collect/getCollect",
          {
            params: {
              b_id: this.$route.query.b_id,
              u_id: sessionStorage.getItem("u_id")
            }
          })
      if(res.data){
        this.isCollect = true //此书籍已用户收藏
      }
    },
    //切换收藏状态
    async changeCollect() {
      this.isCollect = !this.isCollect
      const {data:res} =await this.$axios.get("/collect/changeCollect",
          {
            params: {
              b_id: this.$route.query.b_id,
              u_id: sessionStorage.getItem("u_id")
            }
          })
      console.log(sessionStorage.getItem("u_id"))
      console.log(this.$route.query.b_id)
      console.log(res)
   if(res.data){
        this.$message.info("取消收藏")
      }else{
        this.$message.success("收藏成功")
      }
      await this.countCollect()
    },
    //加入购物车
   async toCart4(){
     const {data:res} = await this.$axios.get("/shopcart/addShopCart",{
       params:{
         b_id:this.$route.query.b_id,
         u_id:sessionStorage.getItem("u_id"),
         num:this.num
       }
      })
     if(res.data){
       this.$message.success("加入成功")
     }else {
       this.$message.error("加入失败")
     }
    },
    //根据b_id获取书籍详情
    async getBookById() {
      console.log(this.$route.query.b_id)
      const {data:res}  = await this.$axios.get("/book/getBookById", {params: {b_id: this.$route.query.b_id}})
      console.log(res)
      if(res.data){
        this.book = res.data
      }
    },
    goBack(){
      this.$router.go(-1)
    }

  },
  mounted() {
    console.log(this.$route.query.b_id)
    this.getBookById()
    this.getCollect()
    this.countCollect()
  }
}
</script>

<style scoped>
.bg_detail{
  background:url('@/assets/img_2.png');
  display: flex;
  position: relative;
  height: 250px;
  width: 100%;
}
.collectBtn{
  background-color: rgba(0,0,0,0);
  border: none;
  color: grey;
}

</style>